<template>
	<view class="container">
		<view class="content">
			<view class="list">
				<view class="item">
					<view class="title">
						姓名:
					</view>
					<input class="uni-input" v-model="form.name" name="input" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="title">
						银行卡号:
					</view>
					<input class="uni-input" v-model="form.bank_id" name="input" placeholder="请输入银行卡号" />
				</view>
				<view class="item">
					<view class="title">
						开户行:
					</view>
					<input class="uni-input" v-model="form.bank_name" name="input" placeholder="请输入开户行" />
				</view>
				<view class="item">
					<view class="title">
						开户地:
					</view>
					<input class="uni-input" v-model="form.bank_address" name="input" placeholder="请输入开户地" />
				</view>
				
				<view class="item">
					<view class="title">
						默认:
					</view>
					<switch color="#0bc4e3" name="switch" :checked="form.is_default" @change="switchchange" style="transform:scale(0.7)"/>
				</view>
			</view>
		</view>
		<view class="bottomButtons"></view>
		<view class="bottomButton">
			<view class="btn" @click="submit">{{state?'添加':'修改'}}</view>
		</view>
	</view>
</template>
<script setup>
		import {ref,getCurrentInstance} from "vue";
		import {onLoad,onShow} from "@dcloudio/uni-app";
		const {proxy} = getCurrentInstance();
		let form =ref({
			name: '',
			bank_id: '',
			bank_name: '',
			bank_address: '',
			is_default: true,
		})
		let state=ref(true)
		onLoad((option)=>{
			console.log('页面onLoad')
			try{
				let data =JSON.parse(option.data)
				if(data.ID){
					state.value=false
					uni.setNavigationBarTitle({ title: '修改银行卡' })
					form.value.name=data.name
					form.value.bank_id=data.bank_id
					form.value.bank_name=data.bank_name
					form.value.bank_address=data.bank_address
					form.value.is_default=data.is_default==1?true:false
					form.value.id=data.ID
				}
				
			}catch(err){
				
			}
		})
		onShow(()=>{
			console.log('页面onShow')
		})
		function switchchange(e){
			form.value.is_default=e.detail.value
			console.log('switchchange',e.detail.value)
		}
		function pageBack(){
			uni.navigateBack({
				delta: 1
			});
		}
		function getBank(id) {
			proxy.$request({
				url: `api/bank/`,
				method: "GET",
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					uni.navigateBack()
				}
			})
		}
		function submit() {
			if(!form.value.name){
				uni.showToast({
					icon:'none',
					title:'请填写姓名'
				})
				return
			}
			if(!form.value.bank_id){
				uni.showToast({
					icon:'none',
					title:'请填写银行卡号'
				})
				return
			}
			if(!form.value.bank_name){
				uni.showToast({
					icon:'none',
					title:'请填写开户银行'
				})
				return
			}
			if(!form.value.bank_address){
				uni.showToast({
					icon:'none',
					title:'请填写开户地址'
				})
				return
			}
			form.value.is_default=form.value.is_default?1:0
			proxy.$request({
				url: `api/bank/`,
				method: state.value?'post':'put',
				data:form.value ,
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					if(res.errno==0){
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
					
				}
			})
		}
</script>


<style lang="scss" scoped>

	.container {
		.content {
			.list {
				background-color: #fff;
				border-radius: 20upx;
				border-bottom: 20upx solid #f5f5f5;
				.item {
						display: flex;
						background-color: #fff;
						padding: 20upx;
						align-items: center;
					.title {
						font-size: 32upx;
						width: 150upx;
						font-weight: 500;
						color: #333;
					}
					.uni-input{
						width: calc(100% - 150upx);
						font-size: 28upx;
					}
				}
			}
		}
	}
</style>